<template>
  <div>
    <div id="map-container" style="width: 100%; height: 500px;"></div>
    <button @click="removeAll">清除所有标记点和多边形</button>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader"; // 引入高德地图加载器

export default {
  name: "MapComponent",
  data() {
    return {
      map: null, // 地图实例
      markers: [], // 存储标记点
      polygon: null, // 存储多边形范围
      points: [] // 存储多边形顶点坐标
    };
  },
  props: {
    // 接收父组件传递的 points 数据
    value: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    // 监听父组件传递的 points 数据变化
    value(newPoints) {
      console.log("newPoints", newPoints);
      if (newPoints) {
        const subStrings = newPoints.split(";");
        // 第二步：遍历子字符串数组，对每个子字符串根据逗号分割并转换为数值
        const newPointsArray = subStrings.map(subStr => {
          // 对每个子字符串根据逗号分割
          return subStr.split(",").map(numStr => {
            // 将分割后的数字字符串转换为数值类型
            return Number(numStr);
          });
        });
        console.log(11111, newPointsArray);
        this.updateMap(newPointsArray);
      } else {
        this.removeAll();
      }
    }
  },
  mounted() {
    // 初始化地图
    this.initMap();
    console.log("points", this.points);
  },
  methods: {
    // 初始化地图
    initMap() {
      AMapLoader.load({
        key: "2aacbdb843ce60941ab685fbb19f2c27", // 替换为你的高德地图 Key
        version: "2.0", // 高德地图版本
        plugins: ["AMap.Scale", "AMap.ToolBar"] // 可选插件
      })
        .then(AMap => {
          console.log("高德地图加载成功");
          // 创建地图实例
          this.map = new AMap.Map("map-container", {
            zoom: 13, // 地图缩放级别
            center: [116.397428, 39.90923] // 地图中心点坐标
          });

          // 添加地图控件（如比例尺、工具栏）
          this.map.addControl(new AMap.Scale());
          this.map.addControl(new AMap.ToolBar());

          // 监听地图点击事件，实现选点功能
          this.map.on("click", this.handleMapClick);
          //   初始化地图上的标记点和多边
        })
        .catch(error => {
          console.error("高德地图加载失败:", error);
        });
    },
    // 处理地图点击事件
    handleMapClick(e) {
      const { lnglat } = e;
      console.log("选中的点坐标：", lnglat.getLng(), lnglat.getLat());

      // 添加标记点
      this.addMarker(lnglat);

      // 更新多边形范围
      this.updatePolygon();
    },
    // 添加标记点
    addMarker(lnglat) {
      // 创建新的标记点
      const marker = new AMap.Marker({
        position: lnglat
      });
      this.markers.push(marker);
      this.map.add(marker);

      // 将坐标添加到多边形顶点数组
      this.points.push([lnglat.getLng(), lnglat.getLat()]);
    },

    // 更新多边形范围
    updatePolygon() {
      // 如果顶点数量小于 3，无法绘制多边形
      if (this.points.length < 3) {
        console.log("至少需要 3 个点才能绘制多边形");
        return;
      }

      // 清除之前的多边形
      if (this.polygon) {
        this.map.remove(this.polygon);
        this.polygon = null;
      }

      // 创建新的多边形
      this.polygon = new AMap.Polygon({
        path: this.points, // 多边形顶点坐标
        strokeColor: "#FF33FF", // 边框颜色
        strokeWeight: 2, // 边框宽度
        fillColor: "#1791fc", // 填充颜色
        fillOpacity: 0.5 // 填充透明度
      });
      this.map.add(this.polygon);

      // 调整地图视野以显示整个多边形范围
      this.map.setFitView([this.polygon]);

      this.$emit("update-points", this.points);
    }, // 清除所有标记点和多边形
    removeAll() {
      // 移除所有标记点
      console.log("移除所有标记点", this.markers);
      console.log("mag", this.map);
      if (this.markers.length > 0) {
        this.markers.forEach(marker => {
          if (marker.getMap()) {
            console.log("移除标记点", marker.getMap(), marker);
            this.map.remove(marker);
          }
        });
        this.markers = [];
      }

      // 移除多边形
      if (this.polygon && this.polygon.getMap()) {
        this.map.remove(this.polygon);
        this.polygon = null;
      }
      // 清空顶点数组
      this.points = [];
      this.$emit("update-points", this.points);

      console.log("所有标记点和多边形已清除");
    },
    // 根据 points 数据更新地图
    updateMap(points) {
      // 清除所有标记点和多边形
      if (this.markers.length > 0) {
        this.map.remove(this.markers);
        this.markers = [];
      }
      if (this.polygon) {
        this.map.remove(this.polygon);
        this.polygon = null;
      }

      // 重新添加标记点和多边形
      points.forEach(point => {
        const marker = new AMap.Marker({
          position: point
        });
        this.markers.push(marker);
        this.map.add(marker);
      });

      if (points.length >= 3) {
        this.polygon = new AMap.Polygon({
          path: points,
          strokeColor: "#FF33FF",
          strokeWeight: 2,
          fillColor: "#1791fc",
          fillOpacity: 0.5
        });
        this.map.add(this.polygon);
        this.map.setFitView([this.polygon]);
      }
    }
  }
};
</script>

<style scoped>
#map-container {
  margin-top: 20px;
}
</style>
